<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding:0;
            margin:0;
        }
        form{
            width: 500px;
            margin:100px auto 0;
            font:16px "microsoft yahei";
            color:#666;
        }
        select{
            width: 100px;
            height: 40px;
            font:14px/40px "sunsim";
        }
        strong{
            display: inline-block;
            padding:0 10px;
        }
    </style>
</head>
<body>
<form action="">
    <span>地区</span><br><br>
    <select name="sel">
        <option value="东城">东城</option>
        <option value="西城">西城</option>
        <option value="朝阳">朝阳</option>
        <option value="昌平">昌平</option>
    </select><br><br>
    <span>职位</span><br><br>
    <select name="sel">
        <option value="美工设计师">美工设计师</option>
        <option value="前端工程师">前端工程师</option>
        <option value="后台开发">后台开发</option>
    </select><br><br>
    <span>薪资</span><br><br>
    <select name="sel">
        <option value="4000">4000</option>
        <option value="5000">5000</option>
        <option value="6000">6000</option>
    </select><br><br>
    <p>

    </p>
</form>
<script>
    var oForm=document.getElementsByTagName("form")[0];
    var P=document.getElementsByTagName("p")[0];
    //创建strong元素
    for(var i=0;i<oForm.sel.length;i++){
        var newStrong=document.createElement("strong");
        P.appendChild(newStrong);
    }
    var strongArr=P.getElementsByTagName("strong");
    for(var i=0;i<oForm.sel.length;i++){
        oForm.sel[i].index=i;
        oForm.sel[i].onchange=function(){
            strongArr[this.index].innerHTML=this.value;

        }
        strongArr[i].innerHTML=oForm.sel[i].value;
        strongArr[i].onclick=function(){
            this.parentNode.removeChild(this);
        }
    }
</script>
</body>
</html>